<template>
    <view class="collect">
        <view v-if="favorites.length > 0">
            <view v-for="(item, index) in favorites" :key="index" class="favorite-item">
                <image class="main-image" :src="item.typeId" mode="aspectFill"></image>
                <view class="favorite-info">
                    <view class="">
                        <text class="favorite-name">{{ item.favName }}</text>
                    </view>
                    <text class="favorite-pic">{{ item.favPic }}</text>
                    <button class="cancel-button" @click="removeFavorite(item.objectId, index)">取消收藏</button>
                </view>
            </view>
        </view>
        <view v-else>
            <text>暂无收藏</text>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { CONFIG, LeanCloudHeader } from "../../utils/config";
import { userStore } from "../../store/userStrore";

const store = userStore();
let favorites = ref([]);

onMounted(() => {
    if (store.isLogin) {
        fetchFavorites();
    } else {
        uni.navigateTo({
            url: '/pages/login/login'
        });
    }
});

async function fetchFavorites() {
    try {
        let res = await uni.$get(`${CONFIG.favXianObj}?where={"username":"${store.userinfo.username}"}`, {
            headers: LeanCloudHeader(store.userinfo.sessionToken)
        });
        if (res.statusCode === 200) {
            favorites.value = res.data.results;
        }
    } catch (error) {
        console.error("获取收藏数据失败：", error);
    }
}

function removeFavorite(objectId, index) {
    uni.request({
        url: `${CONFIG.favXianObj}/${objectId}`,
        method: 'DELETE',
        header: LeanCloudHeader(store.userinfo.sessionToken),
        success: (res) => {
            if (res.statusCode === 200) {
                uni.showToast({
                    title: '取消收藏成功',
                    icon: 'success'
                });
                favorites.value.splice(index, 1); // Remove the item from the list
            } else {
                uni.showToast({
                    title: '取消收藏失败',
                    icon: 'error'
                });
            }
        },
        fail: (err) => {
            console.error('请求失败:', err);
            uni.showToast({
                title: '请求失败',
                icon: 'error'
            });
        }
    });
}
</script>

<style>
.collect {
    padding: 15px;
    background-color: #f0f0f0;
    min-height: 100vh;
}

.favorite-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    transition: transform 0.2s;
}

.favorite-item:hover {
    transform: translateY(-5px);
}

.main-image {
    width: 80px;
    height: 80px;
    margin-right: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.favorite-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.favorite-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.favorite-pic {
    font-size: 14px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cancel-button {
    background-color: #bac0c2; /* Light blue background */
    color: #fff; /* White text */
    padding: 4px 8px; /* Reduced padding for smaller height */
    border: none;
    border-radius: 5px;
    text-align: center;
    width: 100%; /* Full width */
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.cancel-button:hover {
    background-color: #00BFFF; /* Darker blue on hover */
}
</style>